<template>
  <div class="home-container">
    <!-- 动态背景 -->
    <div id="vanta-bg" class="vanta-background"></div>
    
    <!-- Hero区域 -->
    <section class="hero-section">
      <div class="hero-content">
        <h1 class="hero-title">模拟面试</h1>
        <p class="hero-subtitle">探索海量精心整理的面试题目，每一个都值得深入思考</p>
        <div class="hero-actions">
          <router-link to="/interview-questions" class="btn-hero">
            <i class="fas fa-play mr-2"></i>
            开始刷题
          </router-link>
        </div>
      </div>
    </section>

    <!-- 统计数据 -->
    <section class="stats-section">
      <div class="stats-container">
        <div class="stat-item">
          <div class="stat-number">{{ total }}</div>
          <div class="stat-label">面试题目</div>
        </div>
        <div class="stat-item">
          <div class="stat-number">100%</div>
          <div class="stat-label">免费练习</div>
        </div>
        <div class="stat-item">
          <div class="stat-number">24/7</div>
          <div class="stat-label">随时可用</div>
        </div>
        <div class="stat-item">
          <div class="stat-number">∞</div>
          <div class="stat-label">无限进步</div>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import api from '@/utils/api'
import type { PageRequest } from '@/types/interview'

const total = ref(0)

let vantaEffect: any = null
let vantaRetryCount = 0
const MAX_VANTA_RETRIES = 50

const initVantaBackground = () => {
  if ((window as any).VANTA && (window as any).VANTA.BIRDS) {
    vantaEffect = (window as any).VANTA.BIRDS({
      el: "#vanta-bg",
      mouseControls: true,
      touchControls: true,
      gyroControls: false,
      minHeight: 200.00,
      minWidth: 200.00,
      scale: 1.00,
      scaleMobile: 1.00,
      backgroundColor: 0x0a0a0a,
      color1: 0x00ffff,
      color2: 0x8b5cf6,
      colorMode: "lerpGradient",
      birdSize: 1.20,
      wingSpan: 25.00,
      speedLimit: 4.00,
      separation: 20.00,
      alignment: 20.00,
      cohesion: 20.00,
      quantity: 3.00
    })
  } else if (vantaRetryCount < MAX_VANTA_RETRIES) {
    vantaRetryCount++
    setTimeout(initVantaBackground, 100)
  }
}

const loadTotal = async () => {
  try {
    const request: PageRequest = {
      pageNum: 1,
      pageSize: 1
    }
    const response = await api.post('/interview-questions/page', request)
    if (response.data.code === 200) {
      total.value = response.data.data.total
    }
  } catch (error) {
    console.error('加载统计数据失败:', error)
  }
}

onMounted(() => {
  loadTotal()
  initVantaBackground()
})

onUnmounted(() => {
  if (vantaEffect) {
    vantaEffect.destroy()
    vantaEffect = null
  }
})
</script>

<style scoped>
.home-container {
  min-height: 100vh;
  position: relative;
  z-index: 1;
}

.vanta-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* Hero区域 */
.hero-section {
  padding: 6rem 2rem;
  text-align: center;
  color: white;
}

.hero-content {
  max-width: 800px;
  margin: 0 auto;
}

.hero-title {
  font-size: 4rem;
  font-weight: 800;
  margin-bottom: 1.5rem;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  letter-spacing: -0.02em;
}

.hero-subtitle {
  font-size: 1.5rem;
  margin-bottom: 2rem;
  opacity: 0.95;
  line-height: 1.6;
}

.hero-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
}

.btn-hero {
  padding: 1rem 2.5rem;
  font-size: 1.1rem;
  font-weight: 600;
  border: 2px solid white;
  border-radius: 12px;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  color: white;
  transition: all 0.3s ease;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
}

.btn-hero .mr-2 {
  margin-right: 0.5rem;
}

.btn-hero:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-3px);
  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.3);
}

/* 统计数据 */
.stats-section {
  padding: 4rem 2rem;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
}

.stats-container {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
}

.stat-item {
  text-align: center;
  color: white;
}

.stat-number {
  font-size: 3rem;
  font-weight: 800;
  margin-bottom: 0.5rem;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.stat-label {
  font-size: 1.1rem;
  opacity: 0.9;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .hero-title {
    font-size: 2.5rem;
  }
  
  .hero-subtitle {
    font-size: 1.2rem;
  }
  
  .stats-container {
    grid-template-columns: repeat(2, 1fr);
  }
}
</style>
